<template>
  <div>
    <myHeader></myHeader>
    <sidebar></sidebar>
    <div class="content-box">
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import myHeader from "./common/myHeader.vue";
  import sidebar from "./common/sidebar.vue";

  export default {
    components: {
      myHeader,
      sidebar
    },

    data() {
      return {}
    },

    computed: {},

    watch: {},

    created() {
      this.initCss();
    },

    mounted() {
      
    },

    methods: {
      initCss() {
        let sysConfig = this.$store.state.sysConfig;
        if (!this.$common.isEmpty(sysConfig) && !this.$common.isEmpty(sysConfig['webStaticResourcePrefix'])) {
          let root = document.querySelector(":root");
          let webStaticResourcePrefix = sysConfig['webStaticResourcePrefix'];
          root.style.setProperty("--backgroundPicture", "url(" + webStaticResourcePrefix + "assets/backgroundPicture.jpg)");
          console.log("admin：",root.style.getPropertyValue("--backgroundPicture"))
          console.log("this.$common:",this.$common)
          const font = new FontFace("poetize-font", "url(" + webStaticResourcePrefix + "assets/font.woff2)");
          // 加载字体 then可以确保字体加载成功
          font.load().then(() => {
            document.fonts.add(font); 
            // 这里是为了防止字体加载失败，导致页面显示异常
            document.body.style.fontFamily = "poetize-font, sans-serif";
          });
      }
      }
    }
  }
</script>

<style scoped>

  .content-box {
    position: absolute;
    left: 130px;
    right: 0;
    top: 70px;
    bottom: 0;
    transition: left .3s ease-in-out;
  }

  .content {
    width: auto;
    height: 100%;
    padding: 30px;
    overflow-y: scroll;
  }

</style>
